<template>
  <span :class="{[prefixCls+'-badge']:true,'dot':isDot}">
    <slot></slot>
    <template v-if="color">
      <span v-if="color" :class="{[prefixCls+'-badge-status-dot']:color,[prefixCls+'-badge-status-'+color]:color&&color.indexOf('#')==-1 }" :style="{'background':setDotColor()}"></span>
      <span v-if="text">{{text}}</span>
    </template>
    <sup v-else v-html="showValue" :class="{[prefixCls+'-badge-count']:true,[prefixCls+'-badge-count-'+type]:type}"></sup>
  </span>
</template>

<script>
import {prefixCls} from '../prefix'
import './badge.css'

export default {
  name: `${prefixCls}Badge`,
  data() {
    return {
      prefixCls: prefixCls
    }
  },
  props: {
    value: [String, Number],
    dot: Boolean,
    max: Number,
    type: String,
    text: String,
    color: String,
  },
  computed: {
    showValue() {
      // value为数字
      if (!isNaN(this.value) && this.value > this.max) {
        return this.max + '+'
      } else {
        return this.value
      }
    },
    isDot() {
      // value有值，并dot为true时
      return this.value && this.dot
    },
  },
  methods:{
    setDotColor() {
      if(this.color && this.color.indexOf("#")!== -1) {
        return this.color
      }
    }
  }
}
</script>
